<template>
  <div class="content">
    <div class="content-wrap">
      <div class="top-wrap">
        <div class="title">{{ $t("vr.videoList") }}</div>

        <el-dropdown trigger="click" placement="bottom" @command="clickType">
          <span class="category">
            {{ selectedTypeItem.name
            }}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              style="width: auto; min-width: 100px; text-align: center;"
              v-for="item in typeList"
              :command="item"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div
        @click="clickCell(item)"
        class="cell"
        v-for="item in dataList"
        :index="item.id"
      >
        <img class="image" :src="item.picture" />
        <div class="cell-title">{{ item.title }}</div>
      </div>

      <div class="cb"></div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      dataList: [],
      videoType: 0,
      typeList: [],
      selectedTypeItem: {}
    };
  },
  computed: {
    ...mapState(["lang", "userInfo"])
  },
  mounted() {
    this.videoType = this.$route.query.videoType;
    var videolist = this.$route.query.videolist;
    if (videolist == 1) {
      this.videoType = 3;
    }
    if (this.videoType == undefined) {
      console.log("不传videoType，默认为3");
      this.videoType = 3;
    } else if (this.videoType < 1 || this.videoType > 3) {
      console.log("videoType < 1 || > 3 默认3");
      this.videoType = 3;
    }
    console.log("videoType", this.videoType);
    this.handleGetVideoTypes();
  },
  watch: {
    lang() {
      this.handleGetVideoTypes();
    }
  },
  methods: {
    ...mapMutations(["isShowLogin"]),
    clickCell(item) {
      console.log(!this.userInfo);
      if (!this.userInfo) {
        this.isShowLogin("show");
        return;
      }

      var url = encodeURIComponent(item.url);
      this.$router.push("videodetail?url=" + url);
    },
    clickType(item) {
      this.selectedTypeItem = item;
      this.handleGetVideoList();
    },
    async handleGetVideoList() {
      const loading = this.$loading();
      const res = await api.getVideoList(this.lang, this.selectedTypeItem.id);

      this.dataList = res.data;

      // console.log("dataList", res);
      loading.close();
    },
    async handleGetVideoTypes() {
      //剧院id，1大剧院，2小剧院，3微型剧院，不填或者填0返回全部分类
      let params = { theatreId: this.videoType, language: this.lang };
      const res = await api.getVideoTypes(params);
      console.log("getVideoTypes", res);
      if (res.data) {
        this.typeList = res.data;
        if (this.typeList.length) {
          if (this.selectedTypeItem.id) {
            this.typeList.map(object => {
              if (object.id == this.selectedTypeItem.id) {
                this.selectedTypeItem = object;
              }
            });
          } else {
            this.selectedTypeItem = this.typeList[0];
            this.$route.query.subType = this.selectedTypeItem.id;
          }
        }
      }

      if (this.typeList.length) {
        this.handleGetVideoList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: auto;
  background: #f5f5f5;
  padding-top: 40px;
  padding-bottom: 100px;
  .content-wrap {
    width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    // margin-bottom: 40px;
    min-height: 100px;
    background: #ffffff;
    box-shadow: 0px 5px 15px rgba(27, 27, 78, 0.1);
    opacity: 1;
    border-radius: 4px;
    padding-top: 40px;
    padding-bottom: 40px;
    .top-wrap {
      width: 1080px;
      margin: 0 auto;
      height: 80px;
      // background-color: #409eff;
      .title {
        width: auto;
        height: 80px;
        float: left;
        line-height: 80px;
        font-size: 32px;
        line-height: 51px;
        color: #1b1b4e;
        // background-color: #ff00fe;
      }
      .category {
        width: auto;
        height: 25px;
        padding-left: 10px;
        padding-right: 5px;
        margin-top: 15px;
        float: left;
        margin-left: 20px;
        background: #fb4e52;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 25px;
      }
    }

    .cell {
      width: 480px;
      height: auto;
      min-height: 300px;
      // background-color: #ffff00;
      margin-left: 60px;
      margin-right: 60px;
      margin-bottom: 50px;
      float: left;
      .image {
        width: 480px;
        height: 241px;
        object-fit: cover;
        // background-color: #409eff;
      }
      .cell-title {
        width: 100%;
        height: auto;
        margin-top: 20px;
        line-height: 25px;
        font-size: 18px;
        font-weight: 400;
        line-height: 21px;
        color: #101010;
        // background-color: #ff00ff;
      }
    }
    // 解决cell float之后父级不能撑高的问题
    .cb {
      clear: both;
    }
  }
}
</style>
